<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>楼宇识别</title>
  <link rel="shortcut icon" href="搜索_search.png" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="component/elementUI/index.css">
  <link rel="stylesheet" href="style/wangeditor.css">
  <link rel="stylesheet" href="style/index.css">
  <style>
  html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
  }
  #container {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .shia{
    height: 50px;
    width: 63px;
    border-radius: 5px;
    color: aliceblue;
    border: 0;
    background-color: rgb(226, 5, 5);
    position:absolute;
    top: 30px;
    left: 30px;
    z-index: 9999;
  }
  .shib{
    height: 50px;
    border-radius: 5px;
    color: aliceblue;
    border: 0;
    background-color: chocolate;
    position:absolute;
    top: 30px;
    left: 100px;
    z-index: 9999;
  }
</style>
</head>
<body>
  <div id="app">

    <div ref="container" id="container">
      <button @click="printInstance()" class="shia">
        返回
      </button>
      <button @Click=shibie() class="shib">
        开始识别
      </button>
  </div>


</body>
<!-- LDBBZ-BJE63-AMS3L-R6MVG-ZYPEJ-UNBIJ -->
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=LDBBZ-BJE63-AMS3L-R6MVG-ZYPEJ-UNBIJ"></script>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script type="text/javascript" src="utils/wangeditor.js"></script>
<script type="text/javascript" src="utils/jquery.min.js"></script>
<script type="text/javascript" src="utils/jquery.cookie.js"></script>
<script type="text/javascript" src="utils/vue.min.js"></script>
<script type="text/javascript" src="utils/vuex.min.js"></script>
<script type="text/javascript" src="component/elementUI/index.js"></script>
<script type="text/javascript" src="component/component.js"></script>
<script type="text/javascript" src="config/config.js"></script>
<script type="text/javascript" src="utils/FileSaver.min.js"></script>
<script type="text/javascript" src="utils/FileSaver.js"></script>
<script type="text/javascript" src="utils/xlsx.full.min.js"></script>
<script type="text/javascript" src="utils/xlsx.core.min.js"></script>
<script type="text/javascript" src="utils/compressor.js"></script>
<script type="text/javascript" src="utils/ID_Validity.js"></script>
<script type="text/javascript" src="utils/utils.js"></script>
<script>
  function getQueryObject(url) {
    url = url == null ? window.location.href : url
    const search = url.substring(url.lastIndexOf('?') + 1)
    const obj = {}
    const reg = /([^?&=]+)=([^?&=]*)/g
    search.replace(reg, (rs, $1, $2) => {
      const name = decodeURIComponent($1)
      let val = decodeURIComponent($2)
      val = String(val)
      obj[name] = val
      return rs
    })
    return obj
}

   var a = new Vue({
    el: '#app',
    data() {
      return{
        radius:400,
        center:'',
        marker: null,
        map:null,
        circle: null,
        y:{
          lat:45.741695,
          lng:126.68352,
        },
        l:{
          lat:45.734535,
          lng:126.69026,
        }
      }
    },
    mounted() {
      this.initMap();
      this.createMarker();
      console.log(getQueryObject());
      
    },
    methods: {
      shibie(){
        console.log(this.radius,'半径');
        console.log(getQueryObject(),'111111');
        
          // 获取 center1 和 center 的坐标
             var center1Coords = this.l;
             var centerCoords = this.y;

           // 计算 center1 到 center 的距离
              var distance = this.getDistance(center1Coords.lat, center1Coords.lng, centerCoords.lat, centerCoords.lng);

           // 判断距离是否小于等于半径
        if (distance <= this.radius) {
          // 在范围内，设置信息框内容为"在范围内"
          this.$refs['infoWindow'].setContent('在范围内');
        } else {
          // 不在范围内，设置信息框内容为"不在范围内"
          this.$refs['infoWindow'].setContent('不在范围内');
        }
    },
    printInstance(){
      window.location.href = './登记楼宇信息.html'
      },
      createMarker() {
            if (!this.marker) {
                this.marker = new TMap.MultiMarker({
                    id: 'marker-layer1',
                    map: this.map,
                    styles: {
                        "marker": new TMap.MarkerStyle({
                            "width": 40,
                            "height": 35,
                            "anchor": { x: 16, y: 32 },
                            "src": '商店_shop.png',
                        })
                    },
                    // 中心点
                    geometries: [{
                        "id": 'demo',
                        "styleId": 'marker',
                        // 商铺图标位置
                        "position": new TMap.LatLng(45.741695,126.68352),
                        "properties": {
                            "title": "marker"
                        }
                    }]
                });
              }
        },
      initMap() {
        // center圆心位置
        const center = new TMap.LatLng(this.y.lat,this.y.lng);
        console.log(center);
        this.center = center;
        // center1为楼宇位置
        const center1 = new TMap.LatLng(this.l.lat,this.l.lng);
        // 初始化地图
        this.map = new TMap.Map(this.$refs.container, {
          zoom: 12, // 设置地图缩放级别
          center: center, // 设置地图中心点坐标
        });
        // 初始化圆形覆盖物
        this.canvasGroundLayer = new TMap.MultiCircle({
          // id: 'demo-circle', // 设置圆形的ID
          map: this.map,
          // center: center, // 圆心
          // radius: 6500, // 半径，单位：米
          // 设置圆形样式
          style: {
            color: 'rgba(41,91,255,0.16)', // 填充颜色
            borderColor: 'rgba(41,91,255,1)', // 边框颜色
            borderWidth: 2, // 边框宽度
            borderOpacity: 1, // 边框透明度
            fillOpacity: 0.2, // 填充透明度
          },
          geometries: [{
            styleId: 'circle',
            center: center,
            radius:this.radius, //半径  1000包含
          }],

        });
        var marker = new TMap.MultiMarker({
          id: 'marker-layer2',
          map: this.map,
          styles: {
            marker: new TMap.MarkerStyle({
              anchor: { x: 20, y: 60 },
              "src": '城市_city.png',
            })
          },
          geometries: [
            {
              styleId: 'marker',
              position: center1,
            }
          ],
        });
         //初始化infoWindow
      var infoWindow = new TMap.InfoWindow({
                map: this.map, 
                position: center, //设置信息框位置
                content: '不在范围' //设置信息框内容
            });
      },
     
    },
  })
  </script>
</html>